<template>
	<view class="container">
		<!-- 设置白色背景防止软键盘把下部绝对定位元素顶上来盖住输入框等 -->
		<view class="wrapper">
			<image src="../../static/logo.png" class="wx-logo" mode="widthFix"></image>
			<view class="logo-text">企惠</view>
			<view class="describe">点击微信授权登录或使用手机号登录</view>
			<!-- #ifdef MP-WEIXIN -->
			<button class="confirm-btn" open-type="getUserInfo" @getuserinfo="wxGetUserInfo" withCredentials="true">微信授权登录</button>
			<!-- #endif -->
			<view class="forget-section" @click="phoneRegistLogin">手机号码登录/注册</view>
		</view>
		<view class="register-section">
			登录代表您同意
			<text @click="toRegist">企惠用户协议、隐私策略</text>
		</view>
	</view>
</template>

<script>
import { mapMutations } from 'vuex';

export default {
	data() {
		return {
			mobile: '',
			password: '',
			logining: false
		};
	},
	onLoad() {},
	methods: {
		...mapMutations(['login']),
		inputChange(e) {
			const key = e.currentTarget.dataset.key;
			this[key] = e.detail.value;
		},
		// 手机号登陆注册
		phoneRegistLogin(){
			this.$Router.replace({name:'login'});
		},
		wxGetUserInfo(res) {
			const { login, $http,$requestApi } = this;
			let that = this;
			if (!res.detail.iv) {
				uni.showToast({
					title: '您取消了授权,登录失败',
					icon: 'none'
				});
				return false;
			}
			uni.showLoading({
			    title: '加载中'
			});
			uni.login({
				provider: 'weixin',
				success: function(loginRes) {
					console.log('-------获取code-------');
					console.log(loginRes.code);
					uni.getUserInfo({
						withCredentials: true,
						success: function(res) {
							console.log('-------获取用户基本信息和加密数据-------');
							console.log(res);
							$http.request({
									method: 'POST', // 请求方法必须大写
									url: $requestApi.loginByOpenId,
									data: {
										code: loginRes.code,
										encrypted_data:res.encryptedData,
										iv:res.iv
									}
								})
								.then(result => {
									let _data = result.data;
									uni.hideLoading();
									console.log(_data);
									if (_data.code === 2101) {
										that.$api.msg(_data.msg);
										// uni.setStorage({
										// 	key: 'session',
										// 	data: {
										// 		...res.userInfo,
										// 	},
										// 	success: function() {
												// that.$Router.replace({
												// 	path:'/pages/public/wechatPhone',
												// 	params:{
												// 		regkey:_data.result.regkey
												// 	}
												// })
												uni.redirectTo({
													url: '/pages/public/wechatPhone?regkey=' + _data.result.regkey
												});
										// 	}
										// });
									} else {
										uni.setStorageSync('token', _data.result.token);
										that.loadUserInfo(login);
									}
								})
								.catch(err => {
									console.log(err);
								});
						}
					});
				}
			});
			// console.log('-------用户授权，并获取用户基本信息和加密数据------')
			// console.log(res.detail);
		},
		//加载基本信息
		loadUserInfo(login){
			this.$http.request({
				method: 'POST', // 请求方法必须大写
				url: this.$requestApi.getUserInfo,
				data: {}
			})
			.then(result => {
				uni.hideLoading();
				let _data = result.data;
				if (_data.code === 200) {
					uni.navigateBack();
					login({ ..._data.result });
				}
			})
			.catch(err => {
				console.log(err);
			});
		},
	}
};
</script>

<style lang="scss">
page {
	background: #fff;
}
.container {
	padding-top: 100px;
	position: relative;
	width: 100vw;
	height: 100vh;
	overflow: hidden;
	background: #fff;
}
.wrapper {
	position: relative;
	z-index: 90;
	background: #fff;
	text-align: center;
	.wx-logo{
		width: 340upx;
		height: auto;
		border-radius: 50%;
	}
}
.back-btn {
	position: absolute;
	left: 40upx;
	z-index: 9999;
	padding-top: var(--status-bar-height);
	top: 40upx;
	font-size: 40upx;
	color: $font-color-dark;
}
.logo-text {
	font-size: 48upx;
	font-weight: 600;
	text-align: center;
	margin-bottom: 20upx;
}
.describe {
	font-size: $font-base;
	text-align: center;
	color: #c0c4cc;
}
.confirm-btn {
	width: 630upx;
	height: 76upx;
	line-height: 76upx;
	border-radius:10px;
	margin-top: 120upx;
	background:rgba(255,94,0,1);
	color: #fff;
	font-size: 34upx;
	&:after {
		border-radius: 100px;
	}
}
.forget-section {
	font-size: 28upx;
	color: #007AFF;
	text-align: center;
	margin-top: 20upx;
}
.register-section {
	position: fixed;
	left: 0;
	bottom: 50upx;
	width: 100%;
	font-size: 28upx;
	color:#8E8E93;
	text-align: center;
	text {
		color: #007AFF;
		margin-left: 10upx;
	}
}
</style>
